{% assign skills = data.skills %}
{% if skills and skills.display %}
<section class="skills">
    <div class="section-title">
        {{ skills.title }}
    </div>

    <div class="section-content">
        <div class="details">
            <div class="markdown">
                {{ skills.details | markdownify }}
            </div>
        </div>

        {% if skills.levels and skills.levels[0].name %}
        <div class="levels">
            <table class="charts-css bar stacked show-labels data-spacing-5" style="height: calc({{ skills.levels.size }} * 25px)">
                <tbody>
                    {% for level in skills.levels %}
                    <tr>
                        <th scope="row"> {{ level.name }} </th>
                        <td style="--size: calc( {{ level.level }} / 100 ); --color: {{ site.theme_color }}90;"></td>
                        <td style="--size: calc( ( 100 - {{ level.level }} ) / 100 ); --color: {{ site.theme_color }}40;"></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
    </div>
</section>
{% endif %}
